
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>介绍下XSS跨站脚本注入 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>介绍下XSS跨站脚本注入 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">定义</div>
          <div class="card-question">什么是XSS（跨站脚本注入）攻击？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">定义</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">XSS是一种常见的Web安全漏洞，攻击者通过在Web页面中注入恶意脚本代码，试图在用户浏览器中执行这些脚本，以窃取用户信息、篡改网页内容或进行其他恶意操作。</div>
          </div>
          <div class="card-source">来源: 1.1 定义</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">分类</div>
          <div class="card-question">XSS攻击主要分为哪三种类型？请简要说明它们的区别。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">分类</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">XSS攻击主要分为三种类型：1. 存储型XSS：恶意脚本被存储在服务器上，当其他用户访问时执行。2. 反射型XSS：恶意脚本通过URL注入，被服务器“反射”回用户浏览器并执行。3. 基于DOM的XSS：攻击发生在浏览器端，通过操控页面的DOM对象注入恶意代码，不依赖服务器响应。</div>
          </div>
          <div class="card-source">来源: 1.2 分类</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">原理</div>
          <div class="card-question">请描述XSS攻击的一般流程。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">原理</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">XSS攻击流程主要包括三个步骤：1. 恶意代码注入：攻击者通过输入框、URL参数等途径注入恶意脚本。2. 数据存储或传递：根据攻击类型，恶意代码或被存储在服务器，或被立即返回给用户，或通过JavaScript操作DOM。3. 用户浏览器执行：当用户访问包含恶意代码的页面时，浏览器会执行这些代码。</div>
          </div>
          <div class="card-source">来源: 2.1 攻击流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">影响</div>
          <div class="card-question">XSS攻击可能导致哪些主要的安全风险？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">影响</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">XSS攻击可能导致多种安全风险，主要包括：窃取敏感信息（如Cookie、登录凭证）、劫持用户会话、篡改网页内容以误导用户，以及传播恶意软件。</div>
          </div>
          <div class="card-source">来源: 3. XSS攻击的影响</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">策略</div>
          <div class="card-question">在防御XSS时，“输入验证和清理”策略具体指什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">策略</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“输入验证和清理”策略指的是对所有用户输入进行严格验证，确保其符合预期格式。同时，通过过滤或转义来处理可能包含恶意脚本的输入数据，推荐使用白名单策略，只允许已知的安全HTML标签和属性。</div>
          </div>
          <div class="card-source">来源: 4.1 输入验证和清理</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">策略</div>
          <div class="card-question">什么是“输出编码”？它如何帮助防御XSS攻击？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">策略</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“输出编码”是指在将用户输入内容回显到网页时，对其进行特殊字符的编码，以防止浏览器将这些内容解析为可执行脚本。例如，将特殊HTML字符 `<` 编码为 `&lt;`，从而使脚本无法执行。</div>
          </div>
          <div class="card-source">来源: 4.2 输出编码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">内容安全策略（CSP）是如何帮助阻止XSS攻击的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">内容安全策略（CSP）通过设置一个HTTP头，来限制浏览器只能从授权的来源加载资源（如脚本、样式等）。这可以有效阻止未经授权的脚本执行，即使攻击者成功注入了恶意脚本也无法加载和运行。</div>
          </div>
          <div class="card-source">来源: 4.3 内容安全策略（CSP）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">存储型XSS和反射型XSS的核心区别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">核心区别在于恶意脚本的存储和传递方式。存储型XSS的恶意脚本被持久化存储在服务器端（如数据库），会影响所有访问该内容的用户。而反射型XSS的恶意脚本通常存在于URL中，不会被存储，只在用户点击特定链接时被服务器“反射”给该用户并立即执行。</div>
          </div>
          <div class="card-source">来源: 1.2 分类</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">基于DOM的XSS与其他两种类型（存储型和反射型）最显著的不同点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">最显著的不同点在于，基于DOM的XSS攻击完全发生在浏览器端（客户端），它通过操控页面的DOM对象来注入和执行恶意代码，整个过程不依赖于服务器的响应来传递恶意脚本。</div>
          </div>
          <div class="card-source">来源: 1.2 分类</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
